<template>
<!-- 轨迹详情查询 -->
    <div class="locusQuery">
        <el-form class="search-bar" :model="parames" :rules="rules" ref="ruleForm" size="small" label-width="80px" >
            <el-form-item label="开始时间" prop="starttime">
                  <el-date-picker
                            v-model="parames.starttime"
                            type="datetime"
                            :value-format="timeFormat"
                            placeholder="选择开始时间">
                    </el-date-picker>
            </el-form-item>
            <el-form-item label="结束时间" prop="endtime">
                <el-date-picker
                        v-model="parames.endtime"
                        type="datetime"
                        :value-format="timeFormat"
                        placeholder="选择结束时间">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button size="mini" type="primary" @click="getLocus('ruleForm')">查询</el-button>
                <el-button  size="mini" @click="clear">重置</el-button>
            </el-form-item>
        </el-form>
        <div class="data"></div>
		<i class="corner top-left"></i>
		<i class="corner top-right"></i>
		<i class="corner bottom-left"></i>
		<i class="corner bottom-right"></i>
    </div>
</template>
<script>
    import trajectoryAnalysis from "../../assets/js/map/trajectoryAnalysis.minx";
    export default {
        mixins: [trajectoryAnalysis],
		props:{
		  currentImei:{
		      type:String,
		      default:""
		  },
		    startTime:{
		      type:[Number,String],
		      default:0
		    }
		},
        data(){
            return{
                parames:{
                  starttime:"",
                  endtime:""
                },
                timeFormat:"yyyy-MM-dd HH:mm:ss",
                locusList:[],
                rules:{
                    starttime:[
                        { required: true, message: '请选择开始日期', trigger: 'change' },
                        { validator: this.lessThanStartTime }
                        ],
                    endtime:[
                        {  required: true, message: '请选择结束日期', trigger: 'change' },
                        { validator: this.timeOut }
                        ]
                },
                layer:null
            }
        },
        watch:{
            currentImei(newVal,oldVal){
              this.clear();
            }
        },
        methods:{
              //判断时间是否超出一周
            timeOut(rule,value,callback) {
                    if(this.parames.starttime){
                        var day1 = new Date(this.parames.starttime);
                        var day2 = new Date(value);
                        var day = (day2 - day1) / (1000 * 60 * 60 * 24)
                        if(day > 7){
                            callback(new Error('时间范围不能超过七天'));
                        }else {
                            callback();
                        }
                    }else{
                        callback();
                    }
                },
            lessThanStartTime(rule,value,callback){
                var day1 = new Date(this.startTime);
                var day2 = new Date(value);
                var day = (day2 - day1) / (1000 * 60 * 60 * 24)
                if(day < 0){
                    callback(new Error('时间范围不能超过开始绑定时间！！'));
                }else {
                    callback();
                }
            },
                clear(){
                  this.resetForm("ruleForm");
                  if(this.layer){
                      this.layer.clearLayers();
                  }
                  this.clearTrajectoryAnalysis();
                },
                getLocus(formName){
                var data = {
                    imeis:this.currentImei,
                    ...this.parames
                }
                var self = this;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$http.getLocus(data).then(res=>{
                            var result = res.data.data;
                            if(!result || result.length == 0){
                                self.$message.success("暂无行驶轨迹!!!");
                                return;
                            }
                            var _path = result.map(latlng=>{
                                return [latlng.Lat,latlng.Lng];
                            });
                            //加载轨迹
                            if(!self.layer){
                                self.layer = L.layerGroup().addTo(window.map);
                            }else{
                                self.layer.clearLayers();
                                self.clearTrajectoryAnalysis();
                            }
                            var polyline = L.polyline(_path, {color: 'red'}).addTo(self.layer);

                            //加载起止点坐标
                            var startIcon = L.icon({
                              iconUrl: require("../../assets/images/map/startPoint.png"),
                              iconSize: [36, 36]
                             });

                             var endIcon = L.icon({
                              iconUrl: require("../../assets/images/map/endPoint.png"),
                               iconSize: [36, 36]
                             });
                             let startPoint = L.marker(_path[0], { icon: startIcon}).bindPopup('起点',{
                               offset: L.point(0, 0)
                            }).addTo(self.layer);
                             let endPoint = L.marker(_path[_path.length-1], { icon: endIcon}).bindPopup('终点',{
                               offset: L.point(0, 0)
                            }).addTo(self.layer);

                            self.start(_path);
                        }).catch(err=>{
                            console.log(err);
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName){
                this.$refs[formName].resetFields();
            }
        }
    }
</script>
<style scoped lang="less">
.corner{
	display: block;
	width:50px;
	height:50px;
	background: url(~@/assets/images/home/border.png) no-repeat;
	background-size: 100% 100%;
	position: absolute;
	&.top-left{
		top:0;
		left: 0;
	}
	&.top-right{
		top:0;
		right: 0;
		transform: rotateY(180deg);
	}
	&.bottom-left{
		bottom:0;
		left: 0;
		transform: rotateX(180deg);
	}
	&.bottom-right{
		right:0;
		bottom: 0;
		transform: rotateZ(180deg);
	}
}

/deep/ .el-input__inner{
	border: 1px solid rgba(255,255,255,0.2);
}
</style>
